<template>
  <div>
    22
    <ul>
      <li v-for="(item,index) in list" :key="index" @click="goDetail(item)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script setup>
import axios from 'axios'
import {onMounted, ref} from "vue";
import { useRouter } from 'vue-router'

let list = ref([])

onMounted(()=>{
  axios({
    url:'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=6703884',
    headers:{
      'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"16879515478504378843463681"}',
      'X-Host':'mall.film-ticket.film.list'
    }
  }).then(res=>{
    console.log(res)
    list.value = res.data.data.films
  })
})
const router = useRouter()  // 返回路由器实例。相当于在模板中使用 $router。
function goDetail(item){
  // 字符串路径
  router.push(`/detail/${ item.filmId }`)
}

</script>

<style scoped>
li{
  font-size: 16px;
  margin:10px;
}
</style>
